iT邦幫忙

2026 iThome 鐵人賽

DAY 8
0
Vibe Coding

以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。系列 第 8

[Day 8] 刻劃專屬 UI:用自然語言變出純數字鍵盤與客製化計時器

  • 分享至 

  • xImage
  •  

「智慧健身 PWA」已經有了穩固的骨架與資料庫藍圖,現在是時候讓它長出血肉了!
每次在健身房,做完重量訓練後,雙手都已經力竭了,這時候如果要打開手機用手機的數字鍵盤,還咬小心翼翼地輸入的數字,為了讓使用者有良好的打卡體驗,所以需要一個專屬鍵盤,還有一個方便再組間休息倒數的計時器。
精準定位檔案與下達 UI 指令
AI Prompt
幫我實作健身紀錄專用的「純數字鍵盤」與「組間計時器」UI 元件。
請參考@css/components.css @js/components/set-row.js @index.html
要求:
純數字鍵盤
在 @components.css 中使用 CSS Grid 實作一個包含 0-9、小數點與退格鍵的鍵盤。
樣式必須符合深色健身房風格,按鈕高度至少需 60px 以適應手指點擊,並加入點擊時的視覺回饋 (Active state)。
組間計時器 (Rest Timer):
在鍵盤上方加入一個圓形或醒目的倒數計時器 UI,預設顯示 01:30。
畫面整合:
請將這些元件的 HTML 結構插入到 @index.html 的 main 區塊中。
在 @set-row.js 中加上簡單的 console.log 邏輯,當我點擊鍵盤數字時,要在開發者工具印出對應的數值。

顯示畫面:
https://ithelp.ithome.com.tw/upload/images/20260922/20184339ZKazh4h5TU.png


上一篇
[Day 7] 第一週回顧:Vibe Coding 初體驗的AI雷包紀錄與心態重塑
下一篇
[Day 9] 狀態管理邏輯:引導 AI 實作任務狀態切換與 UI 的即時連動
系列文
以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言